<template>
	<div>
		<el-row>
			<el-col :span="19">
				<!-- <el-select :ref="setRefs('select')" @change="onChange" v-model="list" placeholder="请选择程序设计标签" size="small"
					filterable multiple style="width:100%" :filter-method="query">

					<el-option v-for="item in select_option" :key="item.id" :label="item.name" :value="item.name">
						<span style="float: left">{{ item.name }}</span>
						<span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">{{ item.type }}</span>
					</el-option>
				</el-select> -->
					<el-cascader
						placeholder="搜索"
						:options="options"
						@change="onChange"
						v-model="list"
						:props="cascader_props"
						filterable
						style="width:100%"
					/>
			</el-col>

				
			<el-col :span="1">

			</el-col>
			<el-col :span="4">
				<el-button type="primary" size="mini" @click="openLabelSysEdit">标签管理</el-button>
			</el-col>
		</el-row>
		<el-dialog  v-model="dialogVisible" title="标签管理" width="60%" :before-close="handleClose">
			<el-container>
				<el-main>
					<labelsys :system_type="1" style="height:350px" :isDisabled="true"></labelsys>

				</el-main>
			</el-container>
			<template #footer>
				<span class="dialog-footer">
					<!-- <el-button @click="handleClose">取消</el-button> -->
					<el-button type="primary" @click="handleOk()">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import axios from "axios";
import { defineComponent, inject, onMounted, toRefs, reactive, ref, watch, toRaw } from "vue";
import { useRefs } from "/@/core";
import { deepTree, isArray } from "/@/core/utils";
import { ContextMenu } from "cl-admin-crud-vue3";
import { ElMessageBox } from 'element-plus'
import { FormRules } from "naive-ui";
import { CrudLoad, Upsert, Table, RefreshOp } from "cl-admin-crud-vue3/types";
import labelsys from '../../labelSys/views/labelSys.vue'



export default defineComponent({
	name: "mechanical",
	components: {
		labelsys
	},
	props: {
		modelValue: [Number, String, Array]
		// props: Object
	},

	// props: {
	// 	value: {
	// 		type: String,
	// 	}
	// },

	emits: ["update:modelValue"],

	setup(props, { emit }) {
		// 请求服务
		const service = inject<any>("service");

		const { refs, setRefs } = useRefs();

		// 数据列表
		const list = ref<any[]>([]);


		const ruleFormRef = ref()


		// 定义程序设计
		const program_design_list = ref([]);
		const type_list = ref([])
		const param_id = ref("")
		const options = ref<any[]>([]);
		// 获取程序设计
		const getProgramDesign = async function () {
			// 查询出所有程序设计的所有标签
			const res = await service.labelSysService.list({ system_type: "1" })
			console.log(res,'000000000000000');
			// const res = await service.base.system.param.list({ keyName: "programDesign" });
			res.forEach((element: { label: any; name: any; value: any; id: any; }) => {
				element.label = element.name
				element.value = element.name
			});
			console.log(res,'111111111111111');
			options.value = deepTree(res)
			console.log(options.value, '==========ressssss--------');
			// param_id.value = res[0].id
			// 将json字符串转换为json对象
			program_design_list.value = res
			select_option.value = res

			type_list.value = ArrSet(program_design_list.value, "type")
		};

		const selectChange = function (e: any) {
			// console.log(refs.value.select.createdLabel,"+++++++++");

		}

		onMounted(async () => {
			// 获取程序设计
			await getProgramDesign();
		});

		// 解析值
		watch(
			() => props.modelValue,
			(val: any) => {
				
				list.value = isArray(val) ? val : [];
			},
			{
				immediate: true
			}
		);

		// 数组去重
		function ArrSet(Arr: any[], id: string) {
			var obj = {};
			const arrays = Arr.reduce((setArr: any[], item: { [x: string]: string | number; }) => {
				obj[item[id]] ? '' : obj[item[id]] = true && setArr.push(item);
				return setArr;
			}, []);
			return arrays;
		}



		// 绑定值回调
		function onChange(val: any) {
			console.log(list.value);
			
			emit("update:modelValue", list.value);
			// let i = select_option.value.findIndex(item => item.name === val[val.length - 1]);
			// if (i < 0 && list.value.length !== 0) {
			// 	dialogVisible.value = true
			// 	dialogType.value = true
			// 	program_design_info.value = val[val.length - 1]
			// }

		}

		const dialogVisible = ref(false)

		const handleOk = async function (){
			await getProgramDesign()
			dialogVisible.value = false
		}

		const handleClose = (done: () => void) => {
			dialogVisible.value = false
			getProgramDesign()
		}



		const select_option = ref([])
		function query(val: string | RegExp) {

			select_option.value = program_design_list.value.filter(function (item) {
				var reg = new RegExp(val);
				return reg.test(item.type) || reg.test(item.value)
			})
		}
		const program_design_info = reactive({
			value: '',
			type: '',
		})

		// 是判断是编辑
		const dialogType = ref(true)




		function openLabelSysEdit() {
			dialogVisible.value = true
		}

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.courseSourceService).done();
			app.refresh();
		}

		const cascader_props = {
			multiple: true,
		}

		return {
			refs,
			setRefs,
			list,
			onChange,
			selectChange,
			program_design_list,
			query,
			select_option,
			dialogVisible,
			handleClose,
			type_list,
			handleOk,
			ruleFormRef,
			dialogType,
			program_design_info,
			openLabelSysEdit,
			cascader_props,
			options
		};
	}
});
</script>

<style >
.dialog-footer button {
	margin-bottom: 30px;
	margin-right: 50px;
}


</style>
